<template>
  <view class="product-detail-container">
    <!-- 商品轮播图 -->
    <product-swiper :images="product.images" />
    
    <!-- 商品基本信息 -->
    <view class="product-info">
      <view class="price-section">
        <text class="current-price">¥{{product.price}}</text>
        <text class="original-price" v-if="product.originalPrice">¥{{product.originalPrice}}</text>
        <text class="sales">已售{{product.sales}}件</text>
      </view>
      
      <text class="product-title">{{product.title}}</text>
      <text class="product-desc">{{product.desc}}</text>
      
      <view class="delivery-info">
        <text>快递: {{product.freeShipping ? '包邮' : '运费¥'+product.shippingFee}}</text>
        <text>库存: {{product.stock}}件</text>
      </view>
    </view>
    
    <!-- 规格选择 -->
    <spec-selector 
      :specs="product.specs" 
      :selected-spec="selectedSpec"
      @change="handleSpecChange"
    />
    
    <!-- 商品详情 -->
    <view class="detail-section">
      <view class="section-title">
        <text>商品详情</text>
      </view>
      <rich-text :nodes="product.detailContent"></rich-text>
    </view>
    
    <!-- 底部操作栏 -->
    <action-bar 
      :price="product.price"
      :stock="product.stock"
      @add-to-cart="handleAddToCart"
      @buy-now="handleBuyNow"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getProductDetail } from '@/api/product'
import ProductSwiper from './components/ProductSwiper.vue'
import SpecSelector from './components/SpecSelector.vue'
import ActionBar from './components/ActionBar.vue'

// 商品数据
const product = ref({
  id: 1,
  title: '高端智能手机 旗舰配置',
  desc: '超长续航 高清摄像 流畅体验',
  price: 3999,
  originalPrice: 4599,
  sales: 1250,
  stock: 100,
  freeShipping: true,
  shippingFee: 0,
  images: [
    '/static/product.jpg',
    '/static/product.jpg',
    '/static/product.jpg'
  ],
  specs: [
    {
      name: '颜色',
      values: ['黑色', '白色', '蓝色'],
      selected: 0
    },
    {
      name: '内存',
      values: ['8GB+128GB', '8GB+256GB', '12GB+256GB'],
      selected: 1
    }
  ],
  detailContent: `
    <div style="font-size:14px;color:#666;">
      <img src="/static/product-detail-content.jpg" style="width:100%;"/>
      <p>产品特色：</p>
      <ul>
        <li>6.7英寸超视网膜XDR显示屏</li>
        <li>A15仿生芯片，速度超快</li>
        <li>专业级摄像头系统</li>
        <li>超长电池续航</li>
      </ul>
    </div>
  `
})

// 当前选中规格
const selectedSpec = ref('黑色,8GB+256GB')

// 加载商品数据
onLoad(async (options) => {
  if (options.id) {
    try {
      const res = await getProductDetail(options.id)
      product.value = res.data
      updateSelectedSpec()
    } catch (e) {
      uni.showToast({ title: '加载失败', icon: 'none' })
    }
  }
})

// 更新选中规格
const updateSelectedSpec = () => {
  selectedSpec.value = product.value.specs.map(spec => 
    spec.values[spec.selected]
  ).join(',')
}

// 规格变更处理
const handleSpecChange = (specIndex, valueIndex) => {
  product.value.specs[specIndex].selected = valueIndex
  updateSelectedSpec()
}

// 加入购物车
const handleAddToCart = () => {
  uni.showToast({
    title: '已加入购物车',
    icon: 'success'
  })
  // 实际项目中这里调用加入购物车API
}

// 立即购买
const handleBuyNow = () => {
  uni.navigateTo({
    url: `/pages/order/create?productId=${product.value.id}&spec=${selectedSpec.value}`
  })
}
</script>

<style lang="scss">
.product-detail-container {
  padding-bottom: 100rpx;
  
  .product-info {
    padding: 30rpx;
    background-color: $white-bg;;
    
    .price-section {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .current-price {
        font-size: 40rpx;
        color: $primary-color;
        font-weight: bold;
        margin-right: 20rpx;
      }
      
      .original-price {
        font-size: $font-size-28rpx;
        color: #999;
        text-decoration: line-through;
        margin-right: 20rpx;
      }
      
      .sales {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .product-title {
      display: block;
      font-size: $font-size-32rpx;
      font-weight: bold;
      margin-bottom: 15rpx;
    }
    
    .product-desc {
      display: block;
      font-size: 26rpx;
      color: $text-color-666;
      margin-bottom: 20rpx;
    }
    
    .delivery-info {
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      color: $text-color-666;
    }
  }
  
  .detail-section {
    margin-top: 20rpx;
    background-color: $white-bg;;
    padding: 30rpx;
    
    .section-title {
      font-size: $font-size-30rpx;
      font-weight: bold;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f5f5f5;
      margin-bottom: 20rpx;
    }
  }
}
</style>